<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>Bing Maps Canvas Layer - Extended Demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body onload="loadMap();">

<div id='mapDiv' style="width:100%; height: 100%;"></div>

<script type="text/javascript" src="js/jscache.min.js"></script>
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<script type="text/javascript" src="data/sampleData.js"></script>
<script type="text/javascript">


    function loadMap()
    {
        var MM = Microsoft.Maps;
        var map = new MM.Map(document.getElementById("mapDiv"), {
            center: new MM.Location(39.5, -8),
            mapTypeId: MM.MapTypeId.road,
            zoom: 7,
            credentials:"YOUR CREDENTIALS"});


        MM.registerModule("CanvasTileLayerModule", "js/CanvasTileLayerModule.min.js");
        MM.loadModule("CanvasTileLayerModule", {
            callback: function () {

                new CanvasTileLayer(map,
                        {
                            debugMode: false,
                            cacheTiles: true,
                            drawTile: function(context, tile) {

                                for (var i = 0; i < sampleData.length; i++) {

                                    var canvasPixel = tile.getLocationPixelOffset(sampleData[i]);

                                    var squareSize = 10; //in pixels


                                    //don't draw coordinates outside of the tile, taking into account the square size
                                    if(canvasPixel.x < 0 - (squareSize / 2) ||
                                       canvasPixel.x > 256 + (squareSize / 2) ||
                                       canvasPixel.y < 0 - (squareSize / 2) ||
                                       canvasPixel.y > 256 + (squareSize / 2)) {
                                        continue;
                                    }

                                    context.fillStyle = "red";
                                    context.fillRect(canvasPixel.x, canvasPixel.y, squareSize, squareSize);


                                }

                            }

                        });



            }});
    }

    function drawTile(context, tile) {

        var radius = 15;
        var diameter = radius *2;

        for (var i = 0; i < points.length; i++) {

            var canvasPixel = tile.getLocationPixelOffset(points[i]);
            var x = canvasPixel.x;
            var y = canvasPixel.y;

            if(canvasPixel.x < -diameter || canvasPixel.x > 256 + diameter || canvasPixel.y < -diameter || canvasPixel.y > 256 + diameter) {
                continue;
            }

            // Circle
            context.beginPath();
            context.arc(x, y, radius, 0, 2 * Math.PI, false);

            // Fill (Gradient)
            var grd = context.createRadialGradient(x, y, 5, x, y, radius);
            grd.addColorStop(0, "#8ED6FF");
            grd.addColorStop(1, "#004CB3");
            context.fillStyle = grd;

            // Shadow
            context.shadowColor = "#666666";
            context.shadowBlur = 5;
            context.shadowOffsetX = 7;
            context.shadowOffsetY = 7;
            context.fill()

            context.lineWidth = 2;
            context.strokeStyle = "black";
            context.stroke();

            // Text
            context.lineWidth = 1;
            context.fillStyle = "#000000";
            context.lineStyle = "#000000";
            context.font = "12px sans-serif";
            context.textAlign = "center";
            context.textBaseline = "middle";
            context.fillText((i + 1).toString(), x, y);

        }

    }

</script>
</body>
</html>